<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

</head>
<body>
    <a id="test" href="#">I'm the parent--click me!</a>
    <div id="from-child"></div>
    <div id="example"></div>

    <script type="text/javascript" src="../../src/pym.js"></script>
    <script>
        var pymParent = new pym.Parent('example', 'child.html', {});

        function onClick(e) {
            e.preventDefault();
            pymParent.sendMessage('parent-click', 'Parent clicked!');
        }

        pymParent.onMessage('child-click', function(data) {
             document.getElementById('from-child').innerHTML = data;
        });

        document.getElementById('test').addEventListener('click', onClick);
    </script>
</body>
</html>
